<template>
    <div class="flex-column-start xp-component" @click="open" title="备忘录">
        <div class="xp-note-header flex-start">
            备忘录
        </div>
        <div class="full-layout xp-note-content scrollbar">
            <div class="xp-note-item"
            v-for="item in appStore.getNoteList(0)" 
            :key="item.id" 
            @click.stop="handleSelect(item)">
                <p class="flex-between">
                    <p class="xp-note-title oneline" :title="item.title">{{item.title}}</p>
                    <div class="flex-center">
                        <el-icon 
                        :title="item.isTop?'取消置顶':'置顶'" 
                        @click.stop="appStore.topNote(item.noteId);" 
                        :color="item.isTop?'#0052d9':''"><Pointer /></el-icon>
                        <el-icon title="删除" @click.stop="appStore.deleteNote(item.noteId);" style="margin-left:10px"><Delete /></el-icon>
                    </div>
                </p>
                <div class="xp-note-content oneline" :title="item.content">
                    <span>{{item.ut}}</span>
                    {{item.content}}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from 'vue';
import { useAppStore } from '@/store/app';
export default {
    name:'xpNote',
    props: {

    },
    components: {

    },
    emits:['open'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            options:{
                type:'slot',
                id:'1003',
                name:'备忘录',
                component:'xpNotes',
                xIcon:require('@/assets/note.png'),
                data:null,
                background:'#e9a203'
            }
        });
        let methods = {
            open ()
            {
                data.options.data = null;
                context.emit('open', data.options);
            },
            handleSelect (item)
            {
                data.options.data = item;
                context.emit('open', data.options);
            }
        };
        return { 
            ...toRefs(data),
            ...methods,
            appStore
        };
    }
};
</script>

<style scoped lang="scss">
.xp-component {
    width: 100%;
    height: 100%;
    position: relative;
}

.xp-note-header {
    width: 100%;
    height: 50px;
    background-image: linear-gradient(0deg,#ffc927,#ffa403);
    padding: 10px 20px;
}

.xp-note-content {
    overflow-y: auto;
}

.xp-note-item {
    margin: 8px 10px;
    background-color: $BackgroundColor;
    border-radius: 10px;
    padding: 6px 10px;
    text-align: left;
    color: $TextColor;


    i {
        transition: all .3s;

        &:hover {
            color:$PrimaryColor;
        }
    }

    .xp-note-title {
        font-size: .9em;
        font-weight: 550;
        padding: 2px 0;
        max-width: 80%;
    }

    .xp-note-content {
        font-size: .8em;
        padding: 2px 0;
        color: #808080;
        overflow: hidden;

        span {
            font-size: 13px;
            color: #3282e5;
            margin-right: 5px;
        }
    }
}
</style>
